<template>
  <!--选择受托方-->
  <section class="component select-entrusted">
    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="受托方" prop="outsName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="案件数量" prop="caseNum"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="结清数量" prop="settleNum"></el-table-column>
        <el-table-column :formatter="row => $filter.toPercent(row.successRate)" :min-width="$helper.getColumnWidth(5)" label="历史催收成功率" prop="successRate"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="结清总金额(万)" prop="settleAmount"></el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button :disabled="selectionList.length === 0" @click="dialog.caseDistribution=true">下一步</el-button>
      <el-button @click="emitClose">取 消</el-button>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialog.caseDistribution"
      @close="dialog.caseDistribution = false"
      @open="onOpen"
      append-to-body
      title="案件分配"
      width="1000px"
    >
      <case-distribution
        :commissionIds="commissionIds"
        :isLawsuit="isLawsuit"
        :selectedCaseIds="selectedCaseIds"
        @close="onClose()"
        @pre="dialog.caseDistribution=false"
        @success="onSuccess"
        ref="distribution"
      ></case-distribution>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import DataBox from "~/components/common/data-box.vue";
import { Emit, Prop } from "vue-property-decorator";
import { PageService } from "~/utils/page.service";
import { Dependencies } from "~/core/decorator";
import { OutsourceStayService } from "~/services/domain-service/outsource-stay-manage.service";
import caseDistribution from "./case-distribution.vue"; // 案件分配

@Component({
  components: {
    caseDistribution
  }
})
export default class SelectEntrusted extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(OutsourceStayService)
  private outsourceStayService: OutsourceStayService;
  private selectionList: any[] = []; //选中的数据
  private dataSet: any[] = []; //受托方列表数据

  private dialog = {
    caseDistribution: false
  };

  @Prop({
    required: true,
    default: () => []
  })
  private selectedCaseIds: any[];

  /**
   * 是否全部数据
   */
  @Prop({ required: true })
  private isLawsuit: boolean;

  @Emit("close")
  private emitClose() {
    this.selectionList = [];
    this.refresh();
  }

  @Emit("success")
  private emitSuccess() {}

  private refresh() {
    // 默认加载列表
    this.outsourceStayService
      .searchOutsourcePreview(this.isLawsuit, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private get commissionIds() {
    return this.selectionList.map(v => v.outsourceId);
  }

  private onClose() {
    this.dialog.caseDistribution = false;
    this.emitClose();
  }

  private onSuccess() {
    this.dialog.caseDistribution = false;
    this.emitClose();
    // 提示父页面进行数据刷新
    this.emitSuccess();
  }

  private onOpen() {
    this.$nextTick(() => {
      const component = this.$refs.distribution as any;
      component.refreshData();
    });
  }
}
</script>
<style lang="less" scoped>
</style>
